<template>
	<view class="card">
		<view v-if="Crc_person" class="card_body">
			<view class="card_body_content">
				<view class="card_body_content_image">
					<image :src='Crc_person.avatarUrl'>
					</image>
				</view>
				<view class="card_body_content_info">
					<view class="card_body_content_info_row">
						<view class="card_body_content_info_label">姓名：</view>
						<view v-text="Crc_person.name"></view>
					</view>
					<view class="card_body_content_info_row">
						<view class="card_body_content_info_label">性别：</view>
						<view v-text="Tp_gender[Crc_person.gender].name"></view>
					</view>
					<view class="card_body_content_info_row">
						<view class="card_body_content_info_label">联系方式：</view>
						<view @click="callPhone" v-text="Crc_person.phone"></view>
					</view>
					<view class="card_body_content_info_row">
						<view class="card_body_content_info_label">身份证号：</view>
						<view v-text="Crc_person.cardno"></view>
					</view>

				</view>
			</view>

			<view class="card_body_detail">
				<view class="card_body_detail_row">
					<view class="card_body_content_info_label">矫正类型：</view>
					<view v-text="Tp_crc_user[Crc_person.crctype].name"></view>
				</view>
				<view class="card_body_detail_row">
					<view class="card_body_content_info_label">矫正机构：</view>
					<view v-text="Crc_person.deptname"></view>
				</view>
				<!-- 			<view class="card_body_detail_row">
					<view class="card_body_content_info_label">管理员手机号：</view>
					<view >135456161</view>
				</view>
				<view class="card_body_detail_row">
					<view class="card_body_content_info_label">手机定位时间：</view>
					<view>2024-04-14 10:10</view>
				</view>
				<view class="card_body_detail_row">
					<view class="card_body_content_info_label">手机定位：</view>
					<view>江西省南昌市东湖区洪都北大道886号</view>
				</view> -->
			</view>
		</view>
	</view>

</template>

<script>
	import {
		queryById
	} from '@/common/api/correction/cre_person.js'
	import {
		Tp_gender
	} from '@/common/enumeration/Tp_gender.js'
	import {
		Tp_crc_user
	} from '@/common/enumeration/Tp_crc_user'
	import {
		urlConvert
	} from '@/common/js/urils.js';

	export default {
		props: {
			perid: {
				type: String,
				require: true
			}
		},
		data() {
			return {
				Tp_crc_user: Tp_crc_user,
				Tp_gender: Tp_gender,
				Crc_person: null, // 社矫对象信息
				phone: ''
			}
		},
		created() {
			// console.log('人员id', this.perid)
			this.getById(this.perid)
		},
		methods: {
			async getById(id) {
				const {
					data
				} = await queryById(id)
				this.phone = data.phone
				this.Crc_person = data
				if (data && data.cardno) {
					// 检查身份证号码长度是否为18位  
					if (data.cardno.length === 18) {
						// 将身份证中的出生年月日（第7位到第14位）替换为8个星号  
						data.cardno = data.cardno.substring(0, 6) + '********' + data.cardno.substring(14);
					}
				}
				if (data.phone && data.phone.length == 11) {
					data.phone = data.phone.substring(0, 3) + '****' + data.phone.substring(7);
				}
				data.avatarUrl = urlConvert(data.avatarUrl)
				console.log('人员信息', data)
				this.Crc_person = data;
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.phone
				});

			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/flex.scss';

	// 列表项
	.card {
		box-shadow: 0rpx 4rpx 10rpx #ccc;
		border-radius: 20rpx;
		background-color: #ffffff;
		margin-bottom: 30rpx;
		width: 86%;
		height: 180px;
		position: relative;
		// border: 1px solid red;
		padding: 4% 4%;
		font-size: 0.9rem;

		&_body {
			width: 100%;
			height: 100%;

			&_content {
				height: 62%;
				display: flex;
				// border: 1px solid blue;
				width: 100%;

				&_image {
					width: 28%;
					@extend .space_between;

					image {
						width: 100%;
						height: 100%;
					}
				}

				&_info {
					width: 72%;
					padding-left: 4%;
					display: flex;
					flex-direction: column;
					// border: 1px solid red;

					&_label {
						// border: 1px solid red;
						color: #ccc;
					}

					&_row {
						height: 26%;
						// border: 1px solid red;
						display: flex;
					}
				}
			}

			&_detail {
				height: 76%;
				// border: 1px solid red;
				margin-top: 4%;

				&_row {
					height: 22%;
					// border: 1px solid red;
					display: flex;
				}
			}
		}




	}
</style>